<template>
  <view class="mask" @click="dimiss">
    <!-- 阻止子元素事件向父元素冒泡 -->
    <view class="display-default popup-body" @click.stop="!dimiss">
      <text class="popup-title" style="color: #000;font-size: 18px;">网络设置</text>
      <uni-forms ref="form">
        <uni-forms-item label="IP" name="">
          <uni-easyinput v-model="ip" :clearable="false" placeholder="" />
        </uni-forms-item>
        <uni-forms-item label="端口" name="">
          <uni-easyinput v-model="port" :clearable="false" placeholder="" />
        </uni-forms-item>
      </uni-forms>
      <view class="display-default" style="width: 100%;">
        <button class="display-default button-confrim" @click="setIpPort">确定</button>
        <button class="display-default button-cancel" @click="cancel">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        ip: '',
        port: ''
      }
    },
    onLoad() {
      this.ip = uni.getStorageSync('ip') || '127.0.0.1'
      this.port = uni.getStorageSync('port') || '8088'
    },
    methods: {
      //点击mask消失，由于是页面实际相当于返回
      dimiss() {
        console.log("点击mask消失");
        uni.navigateBack()
      },
      // 对话框，是否退出登陆，是
      setIpPort(e) {
        // 点击确定设置ip和端口
        uni.setStorageSync('ip', this.ip)
        uni.setStorageSync('port', this.port)
        uni.setStorageSync('url', `http://${this.ip}:${this.port}/`)

        uni.showToast({
          title: '设置成功，重启后生效',
          icon: 'none',
          position: 'center'
        });
        setTimeout(() => {
          uni.navigateBack()
        }, 500)
      },
      // 对话框，是否退出登陆，否 
      // 实际相当于返回
      cancel() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }

  .mask {
    position: relative;
    width: 100%;
    height: 100%;

    .popup-body {
      background: white;
      border-radius: 30rpx;
      width: 600rpx;
      height: 40%;
      position: absolute;
      // 中间居中
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      padding-bottom: 20rpx;
      // 内部元素竖向布局，并上下等边居中
      flex-direction: column;
      justify-content: space-around;

      & .popup-title {
        margin-top: 20rpx;
      }

      & .button-confrim {
        background: #000;
        color: #fff;
        font-size: 15px;
        width: 42%;
        margin: 0;
        margin-right: 20rpx;
      }

      & .button-cancel {
        background: #f3f3f3;
        color: #7a7a7a;
        font-size: 15px;
        width: 42%;
        margin: 0;
        z-index: 2;
      }
    }
  }
</style>
